<template>
  <div>
    <!-- 使用 ref 属性指定图表容器的引用 -->
    <div ref="echartsContainer" style="width: 100%; height: 400px"></div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: null, // 保存图表实例的变量
      dataName: "支付方式", // 初始化为默认值
    };
  },
  mounted() {
    // 在组件挂载后初始化图表
    this.initChart();
  },
  methods: {
    initChart() {
      // 获取图表容器的引用
      const chartContainer = this.$refs.echartsContainer;

      // 初始化 ECharts 图表实例
      this.myChart = echarts.init(chartContainer);

      // ECharts 配置选项
      const option = {
        tooltip: {
          trigger: "item",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",

          background: "#4FD073",
          itemWidth: 6, // 设置图例项的宽度
          itemHeight: 6, // 设置图例项的高度
          borderRadius: 1,
          textStyle: {
            color: "#333", // 设置图例文本的颜色
          },
          style: {
            backgroundColor: "#f0f0f0", // 设置图例的背景色
          },
        },

        graphic: [
          {
            type: "text",
            left: "center",
            top: "middle",
            style: {
              text: this.dataName, // 使用数据属性
              textAlign: "center",
              fill: "#000",
              fontSize: 16,
            },
          },
          {
            type: "text",
            left: "center",
            top: 220, // 直接使用数字表示位置
            style: {
              text: "金额&占比", // 你可以使用静态文本或其他数据属性
              textAlign: "center",
              fill: "#00F", // 不同的填充颜色
              fontSize: 18, // 不同的字体大小
            },
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              formatter: function (params) {
                // 仅当值不为零时显示标签
                return params.value !== 0
                  ? `${params.name}: ${params.value} (${params.percent}%)`
                  : "";
              },
              position: "outside",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
              length: 10, // 标签线的长度
            },
            data: [
              {
                value: 1011,
                name: "支付宝",
                itemStyle: { color: "#4FD073" }, // 不带透明度
              },

              { value: 20, name: "微信" },
              { value: 0, name: "Email" },
              { value: 0, name: "Union Ads" },
              { value: 0, name: "Video Ads" },
            ],
            tooltip: {
              formatter: "{a} <br/>{b}: {c}%",
            },
          },
        ],
      };

      // 设置图表配置选项
      this.myChart.setOption(option);
    },
  },
  beforeDestroy() {
    // 在组件销毁前销毁图表实例，防止内存泄漏
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
};
</script>
  
  <style scoped>
/* 在这里可以添加组件的样式 */
</style>
  